import React from 'react'
import {Card, Button, Radio,Modal} from 'antd'
import './ui.less'

export default class Modals extends React.Component {

    constructor(){
        super()
        this.state ={
            modal1:false,
            modal2:false,
            modal3:false,
            modal4:false,
            confirm1:false,
            confirm2:false,
            confirm3:false,
            confirm4:false,
        }
    }

    showModal = (type) => {
        console.log(type)
        this.setState({
            [type]:true,
        })
    }
    showConfirm = (type) => {
        Modal[type]({
            title:'这是标题',
            content:'确定要删除么?',
            okText:'点我xxx',
            onOk(){
                console.log('click ok')
            },
            onCancel(){
                console.log('click cancel')
            }
        })
    }
    render() {
        return (
            <div>
                <Card title={"基础模态框"} className={'card-warp'}>
                    <Button type={"primary"} onClick={() => {this.showModal('modal1')}}>open</Button>
                    <Button type={"primary"} onClick={() => {this.showModal('modal2')}}>自定义页脚</Button>
                    <Button type={"primary"} onClick={() => {this.showModal('modal3')}}>顶部20px</Button>
                    <Button type={"primary"} onClick={() => {this.showModal('modal4')}}>水平垂直居中</Button>

                    <Modal title={'react'} visible={this.state.modal1} onCancel={() => {this.setState({modal1:false})}}>
                        你好呀 111
                    </Modal>
                    <Modal title={'react'} visible={this.state.modal2} onCancel={() => {this.setState({modal2:false})}} okText={"保存!"} cancelText={'取消?'}>
                        你好呀 222 自定义页脚
                    </Modal>
                    <Modal title={'react'} visible={this.state.modal3} onCancel={() => {this.setState({modal3:false})}} style={{top:'20px'}} >
                        你好呀 3333
                    </Modal>

                    <Modal title={'react'} visible={this.state.modal4} onCancel={() => {this.setState({modal4:false})}} wrapClassName={'vertical-center-modal'}>
                        你好呀 4444
                    </Modal>
                </Card>

                <Card title={"信息确认框"} className={'card-warp'}>
                    <Button type={"primary"} onClick={() => {this.showConfirm('info')}}>info</Button>
                    <Button type={"primary"} onClick={() => {this.showConfirm('success')}}>success</Button>
                    <Button type={"primary"} onClick={() => {this.showConfirm('error')}}>error</Button>
                    <Button type={"primary"} onClick={() => {this.showConfirm('warning')}}>warning</Button>
                    <Button type={"primary"} onClick={() => {this.showConfirm('confirm')}}>confirm</Button>

                    <Modal title={'react'} visible={this.state.confirm1} okText={'点我'}>
                        你好呀 111
                    </Modal>
                    <Modal title={'react'} visible={this.state.confirm2} onCancel={() => {this.setState({confirm2:false})}} okText={"保存!"} cancelText={'取消?'}>
                        你好呀 222 自定义页脚
                    </Modal>
                    <Modal title={'react'} visible={this.state.confirm3} onCancel={() => {this.setState({confirm3:false})}} style={{top:'20px'}} >
                        你好呀 3333
                    </Modal>

                    <Modal title={'react'} visible={this.state.confirm4} onCancel={() => {this.setState({confirm4:false})}} wrapClassName={'vertical-center-modal'}>
                        你好呀 4444
                    </Modal>
                </Card>


            </div>
        );
    }
}

